require('./VoteList.less');

import * as React from "react";
import Reflux from 'reflux';
import {Badge, Card, Icon, List, ListView, NoticeBar, Tabs} from "antd-mobile";
import {Link} from "react-keeper";
import Actions from './Actions';
import * as ReactMixin from "react-mixin";
import Store from "./Store";

class VoteList extends React.Component {

  constructor(props) {
    super(props);
    //
    this.state = {
      height: document.documentElement.clientHeight - 88
    };
    this.onTabChange = this.onTabChange.bind(this);
    this.onTabClick = this.onTabClick.bind(this);
    this.onEndReached = this.onEndReached.bind(this);
  }

  componentWillMount() {
    console.log('componentWillMount');
    //let hei = this.state.vl.userInfo.id === 'xxx' ? this.state.height : this.state.height - 36;
    // this.setState({
    //   height: hei
    // });
    // Actions.initVoteList(true);
  }

  componentDidMount() {
    console.log('componentDidMount');
    Actions.initVoteList();
  }

  onEndReached() {
    Actions.onEndReached(this.state.vl.currentTab === 0);
  };

  onTabChange(index) {
    Actions.onTabChange(index === 0);
  }

  onTabClick(index) {
    if (index === this.state.vl.currentTab) {
      Actions.initVoteList();
    }
  }

  closeNoticeBar() {
    this.setState({
      height: this.state.height + 36
    });
  }

  render() {
    let t = this;
    const row = (rowData, sectionID, rowID) => {
      const obj = rowData[rowID];
      return (
        <Link to={'/home/vote/v/' + obj.voteId} state={obj}>
          <Card>
            <Card.Header
              title={obj.title}
              thumb="https://cloud.githubusercontent.com/assets/1698185/18039916/f025c090-6dd9-11e6-9d86-a4d48a1bf049.png"
              extra={<span>{obj.voteCount}人已投票</span>}
            />
            <Card.Body>
              <div>{obj.des}</div>
            </Card.Body>
            <Card.Footer content={`开始：${obj.startTime.slice(0, 10)}`} extra={<div>结束：{obj.endTime.slice(0, 10)}</div>} />
          </Card>
        </Link>
      );
    };

    // let hei = this.state.vl.userInfo.id === 'xxx' ? this.state.height : this.state.height - 36;
    // console.log(hei);
    return (

      <div>
        {/*{
          this.state.vl.userInfo.id !== 'xxx' &&
          <NoticeBar
            marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}
            mode="closable"
            onClick={() => this.closeNoticeBar()}
            icon={<Icon type="cross-circle" size="xxs"/>}>
            您还未进行绑定，无法进行任何投票。请进入【我的】页面进行绑定。
          </NoticeBar>
        }*/}
        <List renderHeader={() => (
          <div className="list-title">
            <span>投票列表</span>
          </div>
        )}>
          <Tabs
            tabs={[
              {title: <Badge>进行中</Badge>},
              {title: <Badge>已结束</Badge>}
            ]}
            initialPage={0}
            onChange={(tab, index) => {
              t.onTabChange(index)
            }}
            onTabClick={(tab, index) => {
              t.onTabClick(index);
            }}
          >
            <ListView
              key="0"
              ref={el => t.lv = el}
              dataSource={t.state.vl.dataSourceActive}
              renderFooter={() => (<div style={{padding: 5, textAlign: 'center'}}>
                {t.state.vl.isLoading ? '加载中...' : '加载完成'}
              </div>)}
              renderRow={row}
              style={{
                height: this.state.height,
                overflow: 'auto',
              }}
              pageSize={5}
              onScroll={() => {
                console.log('scroll');
              }}
              scrollRenderAheadDistance={100}
              onEndReached={t.onEndReached}
              onEndReachedThreshold={10}
            />
            <ListView
              key="1"
              ref={el => t.lv = el}
              dataSource={t.state.vl.dataSourceInactive}
              renderFooter={() => (<div style={{padding: 5, textAlign: 'center'}}>
                {t.state.vl.isLoading ? '加载中...' : '加载完成'}
              </div>)}
              renderRow={row}
              style={{
                height: this.state.height,
                overflow: 'auto',
              }}
              pageSize={5}
              onScroll={() => {
                console.log('scroll');
              }}
              scrollRenderAheadDistance={100}
              onEndReached={t.onEndReached}
              onEndReachedThreshold={10}
            />
          </Tabs>
        </List>
      </div>
    );
  }
}

ReactMixin.onClass(VoteList, Reflux.connect(Store, 'vl'));

export default VoteList;
